import {
  AfterViewInit,
  Component,
  ElementRef,
  Injector,
  Input,
  ViewEncapsulation,
  OnInit
} from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { PipelineAndActsListDto } from '@shared/service-proxies/service-proxies';

@Component({
  selector: 'flex-item',
  templateUrl: './flex-item.component.html',
  styleUrls: ['./flex-item.component.less'],
  encapsulation: ViewEncapsulation.None,
  animations: [appModuleAnimation()]
})
export class FlexItemComponent extends AppComponentBase implements OnInit {
  _pipe = new PipelineAndActsListDto();
  currentComponents = new Array();

  viewActCount = 5;
  firstIdx = 1;
  lastIdx = this.viewActCount;
  length = 1;
  currentComponentIdx = 1;

  colorConfig = {
    工艺类: 'm--bg-gy',
    质量类: 'm--bg-zl',
    成本类: 'm--bg-cb',
    原材料: 'm--bg-yl',
    任务类: 'm--bg-rw',
    工序执行类: 'm--bg-gxzx',
    任务执行类: 'm--bg-rwzx'
  };

  @Input()
  get pipe() {
    return this._pipe;
  }

  set pipe(val) {
    this._pipe = val;
    this.length = val.acts.length;
  }

  constructor(injector: Injector, private _element: ElementRef) {
    super(injector);
  }

  ngOnInit(): void {
    //console.log(this._pipe);
    let pipeCount = this._pipe.acts.length;

    let currentComponent = this._pipe.acts.filter(el => {
      return el.isCurrent;
    });

    this.currentComponentIdx = 1;
    if (currentComponent.length > 0) {
      this.currentComponentIdx = currentComponent[0].seq;
    }

    if (pipeCount <= this.viewActCount) {
      this.firstIdx = 1;
      this.lastIdx = this._pipe.acts.length;
    } else {
      if (this.currentComponentIdx <= Math.ceil(this.viewActCount / 2)) {
        this.firstIdx = 1;
      } else {
        this.firstIdx =
          this.currentComponentIdx - Math.floor(this.viewActCount / 2);
      }

      this.lastIdx = this.firstIdx + this.viewActCount - 1;
    }

    if (this.lastIdx > pipeCount) {
      this.lastIdx = pipeCount;
      this.firstIdx = this.lastIdx - this.viewActCount + 1;
    }

    this.getCurrentComponents();
  }

  onComponentClick(event, component) {
    let componentElement = $(event.target).closest('.flex-component');
    let componentElements = componentElement
      .closest('.flex-pipe')
      .find('.flex-component');

    if (componentElement.hasClass('component-active')) {
      componentElement.removeClass('component-active');
    } else {
      componentElements.removeClass('component-active');
      componentElement.addClass('component-active');
    }

    let flag = component.isCurrent;

    this._pipe.acts.forEach(el => {
      el.isCurrent = false;
    });

    component.isCurrent = !flag;
  }

  onPrevClick(event) {
    this.firstIdx--;
    this.lastIdx--;
    this.getCurrentComponents();
  }

  onNextClick(event) {
    this.firstIdx++;
    this.lastIdx++;
    this.getCurrentComponents();
  }

  getCurrentComponents() {
    this.currentComponents = this._pipe.acts.filter(el => {
      return el.seq >= this.firstIdx && el.seq <= this.lastIdx;
    });
  }
}
